<template>
	<view>
		<cu-custom :bgColor="'bg-'+color" :isBack="true"><block slot="backText">返回</block><block slot="content"> 订单打印</block></cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">手机号</view>
				<input placeholder="订单手机号" v-model="from.phone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">订单号</view>
			</view>
			<view class="cu-form-group sw-from">
				<block v-for="(item,index) of from.orderNum" :key="index">
					<view class="item-order-num">{{item}}</view>
				</block>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn block line-green lg" @click="add">添加订单</button>
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button class="cu-btn lg text-white" @click="save" :style="{'backgroundColor':btnColor}">打印</button>
		</view>
		<view class="cu-modal" :class="showModel?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end solid-bottom">
					<view class="content">订单号</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<form>
						<view class="cu-form-group">
							<input class="text-left" placeholder="输入订单号" v-model="modelInput" name="input"></input>
							<button class='cu-btn bg-green shadow' @click="scan">扫码</button>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end solid-top">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="addOrder">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	const model = require('../../printerlib/model/model.js');
	const service = require('../../printerlib/service/xpyunservice.js');
	const util = require('../../printerlib/util/xputil.js');
	export default {
		data() {
			return {
				color: Vue.prototype.bgColor,
				btnColor:Vue.prototype.btnColor,
				y2config:{},
				showModel:false,
				modelInput:'',
				from:{
					phone:'',
					orderNum:[]
				}
			}
		},
		created() {
			var that = this
			var y2config = uni.getStorageSync('y2config');
			if(!y2config){
				uni.navigateTo({
					url:'../setting/setting'
				})
				return
			}
			this.y2config = y2config
			
			
		},
		methods: {
			add(){
				this.showModel = true
			},
			hideModal(){
				this.modelInput = ''
				this.showModel = false
			},
			save(){
				var that = this
				if(this.from){
					let from = this.from
					if(from.phone.length == 0){
						uni.showModal({
							content:'手机号不能为空'
						})
						return
					}
					if(from.orderNum.length == 0){
						uni.showModal({
							content:'请添加至少一条订单号'
						})
						return
					}
					/**
					     * <BR>：换行符（同一行有闭合标签(如 </C>)则应放到闭合标签前面, 连续两个换行符<BR><BR>可以表示加一空行）
					     *  <L></L>：左对齐
					     *  <C></C>：居中对齐
					     *  <R></R>：右对齐
					     *  注意：同一行内容不能使用多种对齐方式，可通过补空格方式自定义对齐样式。
					     *       58mm的机器，一行打印16个汉字，32个字母
					     *       80mm的机器，一行打印24个汉字，48个字母
					     *
					     *  <N></N>：字体正常大小
					     *  <HB></HB>：字体变高一倍
					     *  <WB></WB>：字体变宽一倍
					     *  <B></B>：字体放大一倍
					     *  <CB></CB>：字体放大一倍居中
					     *  <HB2></HB2>：字体变高二倍
					     *  <WB2></WB2>：字体变宽二倍
					     *  <B2></B2>：字体放大二倍
					     *  <BOLD></BOLD>：字体加粗
					     *  <IMG></IMG>：打印LOGO图片，需登录开放平台在【打印机管理=》设备管理】下通过设置LOGO功能进行上传。此处直接写入
					     *             空标签, 如 <IMG></IMG> 即可, 具体可参考样例。
					     *             图片宽度设置：可以通过 <IMG> 标签名称自定义，如 <IMG60> 表示宽度为60，相应的闭合标签 </IMG>
					     *             不需要指定高度。<IMG> 标签不指定宽度默认为40，最小值为20，最大值为100
					     *  <QR></QR>：二维码（标签内容是二维码值, 最大不能超过256个字符, 单个订单最多只能打印一个二维码）。
					     *             二维码宽度设置：可以通过 <QR> 标签名称自定义，如 <QR180> 表示宽度为180，相应的闭合标签 </QR>
					     *             不需要指定宽度。<QR> 标签不指定宽度默认为110，最小值为90，最大值为180
					     *  <BARCODE></BARCODE>：条形码（标签内容是条形码值）
					     */
					    let printContent = '';
						printContent += "<L><BOLD>手机号:</BOLD>"+from.phone+"<BR></L>";
						printContent += util.strRepeat("-", 32) + "<BR>";
						printContent += "<L><BOLD>订单号:</BOLD><BR></L>"
						for (var i = 0; i < from.orderNum.length; i++) {
							let item = from.orderNum[i]
							printContent += "<L>"+util.strRepeat(" ", 4)+item+"</L>";
							printContent += "<BR><BR>"
						}
						
						printContent += util.strRepeat("-", 32) + "<BR>";
						printContent += util.strRepeat("-", 32) + "<BR>";
						
					
					    let request = new model.PrinterRequest();
					    request.user = this.y2config.user;
					    request.userKey = this.y2config.user_key;
					
					    //*必填*：打印机编号
					    request.sn = this.y2config.sn;
					    request.generateSign();
					
					    //*必填*：打印内容,不能超过12K
					    request.content = printContent;
					
					    //打印份数，默认为1
					    request.copies = 1;
					
					    //声音播放模式，0 为取消订单模式，1 为静音模式，2 为来单播放模式，3为有用户申请退单了。默认为 2 来单播放模式
					    request.voice = 1;
					
					    //打印模式：
					    //值为 0 或不指定则会检查打印机是否在线，如果不在线 则不生成打印订单，直接返回设备不在线状态码；如果在线则生成打印订单，并返回打印订单号。
					    //值为 1不检查打印机是否在线，直接生成打印订单，并返回打印订单号。如果打印机不在线，订单将缓存在打印队列中，打印机正常在线时会自动打印。
					    request.mode = 0;
					
					    let result = service.xpYunPrint(request);
					    //正确返回订单编号
					    console.log(JSON.stringify(result));
						
						var orderList = uni.getStorageSync('orderList');
						if(!orderList){
							orderList = []
						}
						if(typeof result == 'string'){
							result = JSON.parse(result)
						}
						console.log(result)
						console.log(typeof result)
						orderList.push({
							'phone': from.phone,
							'orderNum': from.orderNum,
							'time': Date.now()
						})
						uni.setStorageSync('orderList',orderList);
						
						uni.showModal({
							content:'订单打印成功',
							cancelText:'确定',
							confirmText:'继续',
							success: function (res) {
								if (res.confirm) {
									that.from = {
										phone:'',
										orderNum:[]
									}
								} else if (res.cancel) {
									uni.navigateBack({
										
									})
								}
							}
						})
				}
				
			},
			scan(){
				var that = this
				uni.scanCode({
					success(res) {
						that.modelInput = res.result
					}
				})
			},
			addOrder(){
				if(this.modelInput == ''){
					uni.showModal({
						content:'请输入订单号'
					})
					return false
				}
				this.from.orderNum.push(this.modelInput)
				this.hideModal()
			}
		}
	}
</script>

<style>
.item-order-num{
	display: block;
	width: 100%;
	text-align: center;
	line-height: 35px;
	border-bottom: 1px solid #EEEEEE;
}
.sw-from{
	display: block;
}
</style>
